<template>
  <div class="flex flex-col h-screen flex-justify-between">
    <div
      class="detail-top h-240px position-relative"
      :style="{ 'background-image': `url(${detail.picture})` }"
    >
      <PageHeader title="书籍信息"></PageHeader>
      <img
        :src="detail.picture"
        alt=""
        class="w-20 h-30 border-radius-20% titleImg"
      />
      <div class="detail-top-bottom"></div>
    </div>

    <div class="flex-1 mt-120rpx px-10">
      <div class="w-100% h-40px text-center font-size-48rpx">
        {{ detail.name }}
      </div>
      <p class="mt-120rpx">
        <i class="i-system-uicons:user-male-circle"></i> 作者：{{
          detail.author
        }}
      </p>
      <p class="mt-40rpx">
        <i class="i-material-symbols-light-type-specimen"></i> 类型：{{
          detail.type
        }}
      </p>
      <p class="mt-40rpx">
        <i class="i-material-symbols-alarm-on-outline"></i> 出版日期：{{
          detail.createTime
        }}
      </p>
      <p class="mt-40rpx flex justify-between">
        <span>
          <i class="i-material-symbols-alarm-on-outline"></i> 最新章节：{{
            detail.newChapter
          }}
        </span>
        <uni-tag @click="handleChapter" text="查看目录" type="primary" />
      </p>
      <p class="mt-40rpx">
        <i class="i-tabler-building-estate"></i> 状态：{{ detail.status }}
      </p>
      <p class="mt-40rpx">
        <i class="i-material-symbols-alarm-on-outline"></i> 更新时间:{{
          detail.updateTime
        }}
      </p>
      <p class="mt-40rpx">
        <i class="i-ion-ios-briefcase-outline"></i> 简介:{{
          detail.simple.trim()
        }}
      </p>
    </div>

    <div class="flex h-10 border-top">
      <div class="w-50% text-center line-height-10 hover:bg-blend-lighten">
        加入书架
      </div>
      <div
        @click="handleRead"
        class="w-50% text-center line-height-10 hover:bg-"
      >
        立即阅读
      </div>
    </div>
    <chapter ref="chapterRef"></chapter>
  </div>
</template>
<route lang="json">
{
  "layout": "noTabr",
  "navigationBarTitleText": "详情"
}
</route>
<script setup>
import { reactive, onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useBooksStore from "@/store/modules/books";
import request from "@/utils/request";
import chapter from "@/components/chapter.vue";
const booksStore = useBooksStore();
const chapterRef = ref(null);
const List = ref([]);
const detail = reactive({
  name: "",
  id: "",
  picture: "",
  simple: "",
  author: "",
  type: "",
  createTime: "",
  newChapter: "",
  status: "",
  updateTime: "",
});

// 根据id获取小说详细信息, 包括章节信息
const getDetailAPI = async () => {
  const result = await request({
    url: `novel/detail/${detail.id}`,
  });
  const { novel, list } = result;
  console.log(novel, list, "result");
  for (let key in novel) {
    detail[key] = novel[key];
  }
  List.value = list;
  booksStore.setBooksList(list);
  booksStore.setBooksDetail(novel);
  booksStore.setBookId(detail.id);
};
const handleChapter = () => {
  chapterRef.value.handleChange(false);
};
const handleRead = () => {
  uni.navigateTo({
    url: `/pages/bookRead/bookRead?id=${List.value[0].id}`,
  });
};
onLoad((res) => {
  detail.id = res.id;
});
onMounted(() => {
  getDetailAPI();
});
</script>

<style lang="scss" scoped>
.detail-top {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-clip: inherit;
}

.titleImg {
  transform-origin: center;
  position: relative;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  z-index: 45;
}

.detail-top-bottom {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 40px;
  background: #fff;
  border-radius: 50%;
}
</style>
